<template>
	<el-dialog :visible.sync="showsetSubcontractor" :close-on-click-modal="false" class="addAblityForm" @close="$emit('update:showAddpoint',false)"
	 width="80%" :show-close='false' :append-to-body='true'>
		<span slot="title" class="dialog-title">
		  	添加分包
			<el-button  size="mini" class="popupClose" @click="resetPointForm()">关闭</el-button>
		</span>
		<el-row style="padding-bottom: 10px;">
			<el-col :span="8">
				<span>
					分包商
				</span>
				<el-select clearable filterable v-model="project" @change="itemBeanListChange" placeholder="请选择" size='mini'>
					<el-option v-for="item in subData" :key="item.id" :label="item.name" :value="item.id">
					</el-option>
				</el-select>
			</el-col>
			<el-col :span="16">
				<span>检测项目</span>
				<el-select clearable filterable v-model="projectItem" @change="itemBeanListChange1" placeholder="请选择" size='mini'>
					<el-option v-for="item in itemData" :key="item.item" :label="item.itemName" :value="item.item">
					</el-option>
				</el-select>
				<!--<span v-if="showMsgFlag" style="color:red;margin-left:10px;">提示:筛选出的某些能力参数已被禁用！</span>-->
			</el-col>
		</el-row>
		<div style="float:left;width:65%;height:calc(100% - 60px)">
			<div style="float:left;width:46%;height:100%">
				<el-table :data="abilityBeanListAll" style="width: 100%;height:100%" @selection-change="handleReceivedChange" class="tableCon"
				 size="mini">
					<el-table-column width="50" type="selection" ></el-table-column>
					<el-table-column label="序号" min-width="45px">
						<template slot-scope="scope">
							{{scope.$index+1}}
						</template>
					</el-table-column>
					<el-table-column label="能力参数" prop="detectabilityName" min-width="180px" show-overflow-tooltip>
					</el-table-column>
				</el-table>
			</div>
			<div class="tablemiddle">
				<div>
					<i class="el-icon-arrow-right" @click="changeReceived"></i>
				</div>
				<div>
					<i class="el-icon-arrow-left" @click="changeUnclaim"></i>
				</div>
			</div>
			<div style="float:right;width:46%;height:100%">
				<el-table :data="abilityBeanList" @cell-click="clickAbility" highlight-current-row style="width: 100%;height:100%" class="tableCon"
				 size="mini" ref="abilityRef">
					<el-table-column width="50" :render-header="renderHeader">
						<template slot-scope="scope">
							<el-checkbox v-model="scope.row.checked" @change="(value) =>selectedAbility(value, scope.row)"></el-checkbox>
						</template>
					</el-table-column>
					<el-table-column label="序号" min-width="45px">
						<template slot-scope="scope">
							{{scope.$index+1}}
						</template>
					</el-table-column>
					<el-table-column label="能力参数" prop="detectabilityName" min-width="150px" show-overflow-tooltip>
					</el-table-column>
				</el-table>
			</div>
		</div>
		<div style="width:32%;float:right;margin-left:10px;height:calc(100% - 60px);">
			<el-table :data="itemBeanList" v-if="reload" ref="itemRef" style="width: 100%;height:100%" class="tableCon" size="mini">
				<el-table-column width="50" fixed :render-header="renderHeaderItem">
					<template slot-scope="scope">
						<el-checkbox v-model="scope.row.checked" @change="(value) =>selectedItem(value, scope.row)"></el-checkbox>
					</template>
				</el-table-column>
				<el-table-column label="序号" min-width="45px">
					<template slot-scope="scope">
						{{scope.$index+1}}
					</template>
				</el-table-column>
				<el-table-column label="检测项目" prop="itemName" min-width="180px" show-overflow-tooltip>
				</el-table-column>
			</el-table>
		</div>
		<span slot="footer" style="text-align: right;">
			    <el-button type="primary" @click="addSubmit" size="mini">确 定</el-button>
			    <el-button  size="mini" @click="resetPointForm()">取 消</el-button>
			  </span>
	</el-dialog>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		props: ['showsetSubcontractor','showAddpoint', 'sampleForm','getPlanData'],
		data() {
			return {

				itemBeanListAll: [],//所有的检测项目
				abilityBeanList: [], //选中的能力参数
				abilityBeanListAll: [], //所有的能力参数
				abilityInit: [], //接口获取的能力参数数据
				itemBeanList: [], //检测项目列表
				reload: true,
				multipleReceived: [], //勾选的能力参数
				changeFlag: false, //选中的能力参数变化的标志
				multipleSelections: [], //
				multipleSelection: [],
				selectItem: [], //选择的检测项目
				allChecked: false,
				allCheckedItem: false,
				isNext: true, //是否有下一步
				showMsgFlag: false, //是否显示提示信息
				projectItem: "", //检测项目
				itemData: [],


				project: '',
				checkedQC: [],
				newOrEdit: 'new',
				sampleRules: {},
				areaoptions: [],
				options: [],
				typeOptions: [],
				qcValue: false,

				subData: [],//项目集合列表
				projecItemList: [],//检测项目列表
				selectdedItem: [],//左边选中数据
				removeItem: [],//右边选中数据
				DetectList: [],//能力参数总和
				DetectArr: [],//能力参数集合
			}
		},
		computed: {
			...mapState(['typeQcSelect', 'tableHeightF']),
			addPointShow: {
				get: function () {

					return this.showAddpoint
				},
				set: function (newValue) {

				}
			}
		},
		mounted() {
			this.$store.dispatch('dogetDictionary')

		},
		methods: {

			selectInit(row, index) { //判断样品列表是否可勾选 是qc样品不可勾选
				if (row.status == 1) {
					return true  //可勾选
				} else {
					return false  //不可勾选
				}
			},
			// 获取项目集
			readItemSet() {
				// 获取项目集
				this.$http({
					method: 'post',
					apiUrl: '/resource/getSubconts.htm',
				}).then(res => {
					if (res.code === 0) {
						this.subData = res.data
					}
				})
				// 获取检测项
				this.$http({
					method: 'post',
					apiUrl: '/resource/getSubcontItems.htm',
				}).then(res => {
					if (res.code === 0) {
						this.itemData = res.data
					}
				})
			},

			// 切换检测项
			itemBeanListChange(val) {
				this.getItemSetInfos(val, this.projectItem)
			},
			itemBeanListChange1(val) {
				this.getItemSetInfos(this.project, val)
			},
			// 获取检测项下的能力参数
			getItemSetInfos(val, item) {
				var params = { subcontractor: val, item: item };
				this.$http({
					method: 'post',
					apiUrl: '/resource/getSubcontsDetects.htm',
					params: params,
					isJson: true,
				}).then(res => {
					if (res.code === 0) {
						this.showMsgFlag = false;
						for (var i in res.data) {
							this.$set(res.data[i], 'checked', false);
							for (var j in res.data[i].itemBeanList) {
								this.$set(res.data[i].itemBeanList[j], 'checked', false)
							}
							if (res.data[i].status == 0) {
								this.showMsgFlag = true;
							}

						}
						this.abilityBeanListAll = res.data;
						this.abilityInit = JSON.parse(JSON.stringify(res.data))
					}
				})
			},
			// 能力参数选中的数据
			handleReceivedChange(val) {
				this.multipleReceived = val;
			},
			// 从左边搜索到的能力参数向右边穿梭
			changeReceived() {
				if (this.multipleReceived.length != 0) {
					for (var i in this.multipleReceived) {
						// this.multipleReceived[i].checked = true;
						for (var j in this.multipleReceived[i].itemBeanList) {
							this.multipleReceived[i].itemBeanList[j].checked = true;
						}
					}
					this.abilityBeanList = this.util.repeatData({ old: this.abilityBeanList, new: this.multipleReceived, unique: 'detectability' })
					this.abilityBeanListAll = this.util.deleteArrSomeObj({ allArr: this.abilityBeanListAll, delArr: this.multipleReceived, unique: 'detectability' });
					this.changeFlag = !this.changeFlag;
					//重新给已选的能力参数排序
					// this.abilityBeanList = this.util.deleteArrSomeObj({ allArr: this.abilityInit, delArr: this.abilityBeanListAll, unique: 'id' });

				}
			},
			// 从右边向左边
			changeUnclaim() {
				var arr = [];
				for (var i in this.abilityBeanList) {
					if (this.abilityBeanList[i].checked) {
						arr.push(this.abilityBeanList[i])

					}
				}
				this.abilityBeanListAll = this.util.repeatData({ old: this.abilityBeanListAll, new: arr, unique: 'detectability' })
				this.abilityBeanList = this.util.deleteArrSomeObj({ allArr: this.abilityBeanList, delArr: arr, unique: 'detectability' });

				// 给选过去的数组重新排序 是原始数组 去除掉右边能力参数表的数据
				this.abilityBeanListAll = this.util.deleteArrSomeObj({ allArr: this.abilityInit, delArr: this.abilityBeanList, unique: 'detectability' });
				this.changeFlag = !this.changeFlag;
				for (var i in this.abilityBeanListAll) {
					this.abilityBeanListAll[i].checked = false;
				}
				this.allChecked = false;
				this.allCheckedItem = false;
			},

			// 点击能力参数
			clickAbility(row, column) {
				if (column.label == '序号' || column.label == '能力参数') {
					this.abilityBeanList.forEach((item, index) => {
						if (item.detectability == row.detectability) {
							console.log(row)
							this.setRowIndex(row, index)
						}
					})
				}
			},
			setRowIndex(row, index) {
				console.log(row)
				this.itemBeanList = row.itemBeanList
				// 切换到能力参数时 先把检测项目的全选清空，再遍历下面的检测项，如果下面的检测项全选，则
				this.allCheckedItem = false;
				this.reLoad();
				var flag = 1
				if (this.itemBeanList == undefined) {
					flag = flag * 0
				} else {
					if (this.itemBeanList.length == 0) {
						flag = flag * 0
					}
					for (var i in this.itemBeanList) {
						if (this.itemBeanList[i].checked) {
							flag = flag * 1
						} else {
							flag = flag * 0
						}
					}
				}
				if (flag) {
					this.allCheckedItem = true;
				} else {
					this.allCheckedItem = false;
				}
			},
			// 渲染能力参数表头部
			renderHeader(h, { column, $index }) {
				var that = this;
				return h('el-checkbox', {//el-checkbox
					on: {	//这是方法
						change: (value) => {
							that.allChecked = value
							for (var i in that.abilityBeanList) {
								that.abilityBeanList[i].checked = value
								// for (var j in that.abilityBeanList[i].itemBeanList) {
								// 	that.abilityBeanList[i].itemBeanList[j].checked = value
								// }
							}
							// that.allCheckedItem = value;
						},
					},
					props: {
						value: that.allChecked,
					},
				})

			},
			// 渲染检测项目的表头
			renderHeaderItem(h, { column, $index }) {
				var that = this;
				return h('el-checkbox', {//el-checkbox
					on: {	//这是方法
						change: (value) => {
							that.allCheckedItem = value
							for (var i in that.itemBeanList) {
								that.itemBeanList[i].checked = value
							}
							// 如果检测项目全选 对应的父能力参数页选中
							// for (var i in that.abilityBeanList) {
							// 	if (that.abilityBeanList[i].id == that.itemBeanList[0].fRef) {
							// 		that.abilityBeanList[i].checked = value;
							// 	}
							// }
						},
					},
					props: {
						value: that.allCheckedItem,
					},
				})
			},
			// 勾选能力参数时的操作
			selectedAbility(val, row) {
				this.reLoad();
				// 选中能力参数，下面的检测项目全选
				// for (var i in row.itemBeanList) {
				// 	row.itemBeanList[i].checked = val;
				// }
				// this.allCheckedItem = val;
				// 如果是全选中或者全不选，能力参数表头的页勾选或者取消勾选
				var flag = 1;
				for (var i in this.abilityBeanList) {
					if (this.abilityBeanList[i].checked) {
						flag = flag * 1
					} else {
						flag = flag * 0
					}
				}
				if (flag) {
					this.allChecked = true;
				} else {
					this.allChecked = false;
				}


			},
			// 勾选检测项目的操作
			selectedItem(val, row) {
				// 如果是全选中或者全不选，能力参数表头的页勾选或者取消勾选
				var flag = 1;
				// var flag1 = 1;
				for (var i in this.itemBeanList) {
					if (this.itemBeanList[i].checked) {
						flag = flag * 1
					} else {
						flag = flag * 0
					}

				}
				if (flag) {
					this.allCheckedItem = true;

				} else {
					this.allCheckedItem = false;
				}
			},

			// 是否重新加载
			reLoad() {
				this.reload = false;
				this.$nextTick(() => {
					this.reload = true;
				})
			},
			//关闭弹框
			closeAbility() {
				this.$emit("update:addVisible", false)

			},

			resetPointForm() {
				this.$emit('update:showsetSubcontractor', false);
				this.project = "";
				this.projectItem = "";
				this.abilityBeanListAll = [];
				this.abilityBeanList = [];
				this.allChecked = false;
				this.allCheckedItem = false;
				this.itemBeanList = [];
			},

			addSubmit() {
        console.log(this.abilityBeanList)
				var arr = [];
				for (var i in this.abilityBeanList) {
						var obj = {};
						obj.detectability = this.abilityBeanList[i].detectability;
						obj.detectabilityName = this.abilityBeanList[i].detectabilityName;
            obj.version = "---";
						obj.analyst = '';
						obj.analystName = '';
						obj.method = this.abilityBeanList[i].method;
						obj.methodName = this.abilityBeanList[i].methodName;
						obj.doSubpackage = true;
						obj.subcontractor = this.abilityBeanList[i].subcontractor;
						obj.subcontractorName = this.abilityBeanList[i].subcontractorName;
						obj.itemBeans = []
						obj.itemName = []
						obj.itemNames = '';
						var hasItem = false;
						for (var j in this.abilityBeanList[i].itemBeanList) {
							if (this.abilityBeanList[i].itemBeanList[j].checked) {
								hasItem = true;
								obj.itemName.push(this.abilityBeanList[i].itemBeanList[j].itemName)
								obj.itemNames = obj.itemName.join('、')
								obj.itemBeans.push(this.abilityBeanList[i].itemBeanList[j])
							}
						}
						if(hasItem){
							arr.push(obj)
						}
				}

				this.$parent.newTestDate = this.util.repeatData({ old: this.$parent.newTestDate, new: arr, unique: 'detectability' })

				console.log(this.$parent.newTestDate)
				if(this.getPlanData.source == 0){
					this.$parent.changeMaterial()
				}
				this.resetPointForm()
			}
		},
		watch: {
			showsetSubcontractor(val){
				if(val){
					this.readItemSet();
					this.getItemSetInfos("","")
				}
			},
			changeFlag(val) {
				if (this.abilityBeanList.length != 0) {
					this.$refs.abilityRef.setCurrentRow(this.abilityBeanList[0])
					this.clickAbility(this.abilityBeanList[0], { label: "序号" })


				} else {
					this.itemBeanList = []
				}
			},
			abilityBeanList: {
				deep: true,
				handler(val, oldVal) {
					var flag = 1;
					if (this.abilityBeanList.length != 0) {
						for (var i in this.abilityBeanList) {
							if (this.abilityBeanList[i].checked) {
								flag = flag * 1
							} else {
								flag = flag * 0
							}
						}
						if (flag) {
							this.allChecked = true;
						} else {
							this.allChecked = false;
						}
					}

				}
			}
		}
	}

</script>

<style>
	.addAblityForm .el-dialog {
		height: 70%;
	}

	.addAblityForm .el-dialog .el-dialog__body {
		height: calc(100% - 85px);
		padding: 10px;
	}

	.addAblityForm .tableCon .el-table__fixed-body-wrapper,
	.addAblityForm .tableCon .el-table__body-wrapper {
		height: calc(100% - 46px);
	}

	.addAblityForm .tablemiddle {
		position: absolute;
		left: calc(30% - 15px);
		top: 36%;
		font-size: 30px;
		width: 10%;
		text-align: center;
	}

	.addAblityForm .tablemiddle i {
		cursor: pointer;
		font-size: 16px;
	}

	.addAblityForm .el-icon-arrow-right,
	.addAblityForm .el-icon-arrow-left {
		border: 1px solid #dcdfe6;
        background-color: #f5f7fa;
		display: inline-block;
		width: 32px;
		height: 32px;
		border-radius: 50%;
	}

	.addAblityForm .el-icon-arrow-right::before,
	.addAblityForm .el-icon-arrow-left::before {
		color: #999;
	}
</style>
